<template>
    <div class="wrapper">
        <div style="position: sticky; top: 0; z-index: 99">
            <van-tabs v-model:active="active" color="#66d6ff" sticky>
                <van-tab :title="item.label" v-for="item in tabs" :key="item.value" />
            </van-tabs>
        </div>
        <div class="sumInfo haveSlider" v-if="active == 0">
            <div>
                <van-sidebar v-model="sourceActive" @change="changeSourceActive" color="#66d6ff">
                    <van-sidebar-item v-for="item in AgencySources" :key="item.value" :title="item.name" :name="item.value" />
                </van-sidebar>
            </div>
            <div>
                <div v-for="item in viewMark" :key="item.id">
                    <p class="titled">
                        <span>{{ item.name }}</span>
                    </p>
                    <van-cell-group inset>
                        <van-field
                            v-model="item.backCash"
                            label-width="8em"
                            label="押金返现"
                            :placeholder="'区间' + item.lowerBackCash + '-' + item.upperBackCash"
                        />
                        <van-field
                            v-model="item.addedBackCash"
                            label="唤醒返现"
                            label-width="8em"
                            :placeholder="'区间' + item.lowerAddedBackCash + '-' + item.upperAddedBackCash"
                        />
                        <van-field
                            v-model="item.reachBackCash"
                            label="达标返现"
                            v-if="classesId == 2"
                            label-width="8em"
                            :placeholder="'区间' + item.lowerDepositBackCash + '-' + item.upperDepositBackCash"
                        />
                    </van-cell-group>
                </div>
                <view class="btn" v-if="viewMark.length" @click="submit">确认</view>
                <empty v-if="!viewMark.length"></empty>
            </div>
        </div>
        <div class="sumInfo" v-if="active == 1">
            <div style="margin-top: 20px">
                <van-cell-group inset>
                    <van-field
                        v-for="(item, index) in viewSim"
                        :key="index"
                        v-model="item.otherBack"
                        label-width="8em"
                        :label="item.otherName"
                        :placeholder="'区间 ' + item.lowerOtherBack + ' - ' + item.upperOtherBack"
                    />
                </van-cell-group>
                <empty v-if="!viewSim.length"></empty>
            </div>
            <view class="btn" v-if="viewSim.length" @click="submitOther">确认</view>
        </div>
        <!-- 二年流量卡 -->
        <div class="sumInfo" v-if="active == 2 && viewSec.canConfig == 'Y'">
            <div style="margin-top: 20px" v-for="(item, index) in viewSec.simBackInfo" :key="index">
                <!-- <p class="titled">
                    <span>{{ item.name }}</span>
                </p> -->
                <div class="order" style="margin-bottom: 10px; padding: 0 20px">扣费次序: {{ item.simFeeOrder }}【{{ item.simRule }}】</div>
                <van-cell-group inset>
                    <van-field v-model="item.cashBack" label-width="8em" label="返现金额" />
                    <!-- <van-field v-show="item.addedBackCashs !== undefined" v-model="item.addedBackCash" label="额外返现金额" label-width="8em"
                        :placeholder="'区间' + item.lowerAddedBackCash + '-' + item.upperAddedBackCash" />
                    <van-field v-model="item.rewardBackCash" label="达标返现金额" label-width="8em" v-show="item.rewardBackCashs !== undefined"
                        :placeholder="'区间' + item.lowerRewardBackCash + '-' + item.upperRewardBackCash" />
                    <van-field v-model="item.rewardBackCash2" label="达标返现金额2" v-show="item.rewardBackCash2s !== undefined"
                        label-width="8em"
                        :placeholder="'区间' + item.lowerRewardBackCash2 + '-' + item.upperRewardBackCash2" /> -->
                </van-cell-group>
            </div>
            <view class="btn" v-if="viewMark.length" @click="issaveManySimBackInfo(item)">确认</view>
            <empty v-if="!viewMark.length"></empty>
        </div>
    </div>
</template>

<script>
import { showToast } from 'vant'
import { defineComponent } from 'vue'
import store from '../../store/index.js'

import {
    agentBackInfoCostInterval,
    backOtherInterval,
    lowerAgentBack,
    lowerAgentBackOther,
    saveBackInfo,
    saveBackInfoOther,
    getManySimBackInfo,
    saveManySimBackInfo
} from '@/api/service'
import { findAgencySource } from '@/api/agent'
import { showDialog } from 'vant'

export default defineComponent({
    name: 'cashBack',
    setup() {
        const router = useRouter()
        const route = useRoute()
        const state = reactive({
            curSource: '',
            agentNo: route.query.agentNo,
            mark: [],
            viewSec: {},
            viewMark: [],
            viewSim: [],
            mark1: [],
            showRewardBack: 'false',
            showRewardBack2: 'false',
            simInterval: [],
            other: [],
            classesId: route.query.classesId,
            other1: [],
            simInfo: {},
            active: 0,
            sourceActive: 0,
            tabs: [{ label: '唤醒返现', value: 0 }],
            AgencySources: []
        })
        console.log(state.classesId)
        // 查询唤醒返现数据
        const getLowerAgentBack = () => {
            state.viewMark = []
            lowerAgentBack({
                agencySource: state.AgencySources[state.sourceActive].value,
                agentNo: state.agentNo
            }).then(res => {
                const { code, object } = res
                if (code === 200) {
                    state.mark = res.object
                }
                agentBackInfoCostInterval({
                    agentNo: state.agentNo,
                    agencySource: state.AgencySources[state.sourceActive].value,
                }).then(res1 => {
                    console.log(res1)
                    if (res.code === 200) {
                        res1.object.forEach(t => {
                            let i = state.mark.find(item => item.actCode == t.actCode)
                            console.log(i)
                            state.viewMark.push({
                                ...i,
                                ...t
                            })
                        })
                    }
                })
            })
        }
        const tabsChange = e => {
            console.log(e)
            if (e === 1) {
                getLowerAgentBackOther()
            } else {
                getSources()
            }
        }
        // 获取所有的机构
        const getSources = () => {
            findAgencySource().then(res => {
                state.AgencySources = res.object
                getLowerAgentBack()
            })
        }
        getSources()
        const changeSourceActive = e => {
            getLowerAgentBack()
        }
        // 提交唤醒返现
        const submit = () => {
            let dd = state.viewMark.map((v, i) => {
                return {
                    backCash: v.backCash,
                    reachBackCash: v.reachBackCash,
                    addedBackCash: v.addedBackCash,
                    agentNo: state.agentNo,
                    actCode: v.actCode,
                    depositBackCash: v.depositBackCash,
                    agencySource: state.AgencySources[state.sourceActive].value
                }
            })
            saveBackInfo(dd).then(res => {
                showDialog({ message: '配置成功', confirmButtonColor: '#66d6ff' }).then(res => {
                    router.go(-1)
                })
            })
        }

        const getLowerAgentBackOther = () => {
            state.viewSim = []
            lowerAgentBackOther({
                agentNo: state.agentNo
            }).then(res1 => {
                if (res1.object.length) {
                    state.tabs = [
                        { label: '唤醒返现', value: 0 },
                        { label: 'sim卡/其他', value: 1 }
                    ]
                }
                backOtherInterval({
                    agentNo: state.agentNo
                }).then(res => {
                    res1.object.forEach(t => {
                        let i = res.object.find(item => item.otherCode === t.otherCode)
                        state.viewSim.push({
                            ...i,
                            ...t,
                            agentNo: state.agentNo
                        })
                    })
                })
                isgetManySimBackInfo()
            })
        }

        getLowerAgentBackOther()
        const submitOther = () => {
            let a = false
            let aa = state.viewSim.map(item => {
                item.upperOtherBack = null
                item.lowerOtherBack = null
                if (item.otherBack % 1 !== 0) a = true
                return item
            })
            // if (a) {
            //     showToast("只能输入整数")
            //     return
            // }
            saveBackInfoOther(JSON.stringify(aa)).then(res => {
                showDialog({ message: '配置成功', confirmButtonColor: '#66d6ff' }).then(()=> {
                    router.go(-1)
                })
            })
        }
        // 查询二年流量卡
        const isgetManySimBackInfo = () => {
            getManySimBackInfo({
                agentNo: state.agentNo
            }).then(res => {
                console.log(1111111111111111111111111111111)
                state.viewSec = res.object
                if (state.viewSec.canConfig == 'Y') {
                    state.tabs = [
                        { label: '唤醒返现', value: 0 },
                        { label: 'sim卡/其他', value: 1 },
                        {
                            label: '二次流量卡',
                            value: 2
                        }
                    ]
                }
            })
        }
        // 保存二年流量卡
        const issaveManySimBackInfo = item => {
            state.viewSec.simBackInfo.forEach(item => {
                delete item.createTime
                delete item.updateTime
                delete item.operator
            })
            saveManySimBackInfo(state.viewSec).then(res => {
                showDialog({ message: '配置成功', confirmButtonColor: '#446AFF' }).then(() => {
                    router.go(-1)
                })
            })
        }
        return {
            ...toRefs(state),
            submit,
            tabsChange,
            submitOther,
            issaveManySimBackInfo,
            changeSourceActive
        }
    }
})
</script>

<style scoped lang="scss">
::v-deep .van-sidebar-item--select:before {
    background: #66d6ff;
}
.haveSlider {
    display: flex;
}
.titled {
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    padding: 20px;
    opacity: 1;
}

.btn {
    width: 160px;
    height: 40px;
    background: #66d6ff;
    opacity: 1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    margin: 50px auto;
    justify-content: center;
    color: #ffffff;
}

.wrapper {
    padding-bottom: 10px;
}
</style>
